<template>
	<view class="page">
		<view class="nav flex_r_between">
			<view class="image flex_center" @click="showLogin">
				<image :src="circle.avatar" mode="aspectFill"></image>
				<text class="hidden">{{ circle.name || '' }}</text>
			</view>

			<view class="icon flex_center" @click="showLogin">
				<view class="change_circle flex_center">
					<text>切换</text>
					<u-icon name="arrow-down-fill" size="20rpx" color="#666666"></u-icon>
				</view>
				<image :src="$util.prefix('public/aircraft.png')" mode="aspectFill"></image>
			</view>
		</view>

		<view class="info"
			:style="`background: url(${circle.bg_img || $util.prefix('circle/circle_info_bg.png')}) 0 0 no-repeat;`">
			<view class="top flex_center">
				<view class="block flex_center">
					<view class="avatar">
						<image :src="circle.avatar" mode="aspectFill" class="image"></image>
					</view>
					<view class="nickname">
						<view class="name flex_center">
							<text class="hidden">{{ circle.name || '' }}</text>

						</view>
						<view class="cate flex_center">
							<!-- 认证类型:0=没有，1=实名认证（优先展示），2=身份认证，3=公司认证 -->
							<image :src="$util.prefix('circle/qi_icon.png')" mode="aspectFill" class="icon"
								v-if="circle.owner_auth_status == 2 || circle.owner_auth_status == 1"></image>
							<image :src="$util.prefix('circle/v_icon.png')" mode="aspectFill" class="icon"
								v-else-if="circle.owner_auth_status == 3"></image>
							<view class="flex_center">
								<text class="cate_name hidden">{{ circle.owner_auth_name || '' }}</text>
								<text class="cate_num">{{ circle.member_count || 0 }}人</text>
							</view>
						</view>
					</view>
				</view>


			</view>

			<view class="bottom hidden_2">
				{{ circle.desc || '' }}
			</view>

			<view class="num flex_center">
				<view class="item flex_center">
					<image :src="$util.prefix('circle/circle_info_people_num.png')"></image>
					<text>总人数 {{ circle.member_count || 0 }}人</text>
				</view>
				<!-- <view class="item flex_center">
					<image :src="$util.prefix('circle/circle_info_people_rate.png')"></image>
					<text>活跃度 {{ circle.active_percent || 0 }}%</text>
				</view> -->
			</view>

			<!-- <view class="tag flex_center">
				<view class="item flex_r_around" v-for="(item,index) in circle.tags" :key="index"
					:id="`item${index % 6 + 1}`">
					<text>{{ item }}</text>
				</view>
			</view> -->
		</view>

		<view class="content">
			<view class="tab flex_center">
				<view style="flex: 1;">
					<scroll-view scroll-x="true" style="width: 100%;">
						<view class="flex_center">
							<view class="item flex_r_around" @click="onTab(5)" :id="tab == 5 ? 'select' : ''"
								v-if="circle.card_open == 1">
								<text>{{ circle.card_tab_name || '名片' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(4)" :id="tab == 4 ? 'select' : ''"
								v-if="circle.goods_open == 1">
								<text>{{ circle.goods_tab_name || '商品' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(1)" :id="tab == 1 ? 'select' : ''"
								v-if="circle.article_open == 1">
								<text>{{ circle.article_tab_name || '动态' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(2)" :id="tab == 2 ? 'select' : ''"
								v-if="circle.active_open == 1">
								<text>{{ circle.active_tab_name || '活动' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(3)" :id="tab == 3 ? 'select' : ''"
								v-if="circle.group_open == 1">
								<text>{{ circle.group_tab_name || '群聊' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(6)" :id="tab == 6 ? 'select' : ''"
								v-if="circle.live_open == 1 && circle.live_type == 1">
								<text>{{ circle.live_tab_name || '直播' }}</text>
							</view>
							<view class="item flex_r_around" @click="onTab(7)" :id="tab == 7 ? 'select' : ''"
								v-if="circle.member_open == 1">
								<text>{{ circle.member_tab_name || '成员' }}</text>
							</view>

							<view class="item flex_r_around" @click="onTab(8)" :id="tab == 8 ? 'select' : ''"
								v-if="circle.live_open == 1 && circle.live_type == 2">
								<text>{{ '语音厅' }}</text>
							</view>
						</view>

					</scroll-view>
				</view>

				<view class="btn flex_r_around" @click="showLogin">
					<u-icon name="list" color="#131313" size="32rpx"></u-icon>
				</view>
			</view>

			<view class="live_tab" v-if="tab == 8">
				<scroll-view scroll-x="true">
					<view class="flex_center">
						<view class="item flex_r_around" :id="live_tab == item.id ? 'select' : ''"
							v-for="(item,index) in circle.chat_room_sub_tab_list" :key="index" @click="onLiveTab(item)">
							<text>{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="list flex_center">

				<!-- <view class="mengceng" v-if="(circle.is_preview == '0' || circle.is_preview == 0) && list.length">
					<view class="text flex_c">
						<text>圈主设置加入后方可</text>
						<text>查看全部内容</text>
					</view>
				</view> -->

				<!-- type:
				3-按摩圈
				4-直播圈
				1-交友圈 -->

				<!-- :style="circle.is_preview == 0 || circle.is_preview == '0' ? 'filter: blur(10rpx);' : ''" -->
				<view class="item" v-for="(item,index) in list" :key="index" @click="showLogin">

					<!-- 技师 -->
					<!-- <technician :item="item" :index="index"></technician> -->

					<!-- 视频 -->
					<videoTem :item="item" :index="index" v-if="tab == 1"></videoTem>

					<!-- 活动 -->
					<active :item="item" :index="index" v-if="tab == 2"></active>

					<!-- 群聊 -->
					<group :item="item" :index="index" v-if="tab == 3"></group>

					<!-- 商品 -->
					<product :item="item" :index="index" v-if="tab == 4"></product>

					<!-- 卡片 -->
					<cardItem :item="item" :index="index" v-if="tab == 5"></cardItem>

					<!-- 直播 -->
					<live :item="item" :index="index" v-if="tab == 6"></live>

					<!-- 成员 -->
					<member :item="item" :index="index" v-if="tab == 7"></member>

					<!-- 语音厅 -->
					<live :item="item" :index="index" v-if="tab == 8"></live>

				</view>
			</view>

			<view class="empty flex_r_around" v-if="list.length == 0 && total == 0">
				<empty></empty>
			</view>

			<view class="empty flex_r_around" v-if="list.length == 0 && total == 1" style="padding: 20rpx 0;">
				<HevuLoading type="loading4" :opacity="0" loadingText="加载中..." text-color="#FD2A53"
					loadingIconColor="#FD2A53" />
			</view>
		</view>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal">
				<view class="text">需注册并下载APP体验完整功能</view>
				<view class="btn flex_r_around">
					<!-- <view class="item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view> -->
					<view class="item submit flex_r_around" @click="toDownLoad">
						<text>去注册</text>
					</view>
				</view>

				<view class="icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>

		<!-- <view class="btn_box flex_r_around">
			<view class="item flex_r_around" @click="showLogin">
				<text>加入圈子</text>
			</view>
		</view> -->

		<view class="tabbar flex_r_around" @click="showLogin">
			<view class="item">圈子</view>
			<view class="item" id="select">邀请</view>
			<image :src="$util.prefix('public/tabbar_icon.png')"></image>
			<view class="item">消息</view>
			<view class="item">我的</view>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_register" mode="center" @close="show_register = false" bgColor="transparent">
				<view class="register flex_c">
					<view class="logo">
						<image :src="$util.prefix('logo.png')" mode="aspectFill"></image>
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder"
							v-model="mobile" />
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
							v-model="code" />
						<view class="code_btn" @click="getCode">
							{{sending ? `已发送${num}` : '获取验证码'}}
						</view>
					</view>

					<view class="text flex_center">
						<i>*</i>
						<text>手机号用于验证并绑定账号</text>
					</view>

					<view class="register_btn flex_r_around" @click="onSubmit">
						<text>确定</text>
					</view>

				</view>
			</u-popup>
		</view>

		<u-popup :show="show_two" mode="center" @close="show_two = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_two = false"></u-icon>
				</view>
				<view class="title">加入成功</view>
				<view class="text">请到应用市场搜索《超圈》体验完整版</view>
				<view class="btn flex_r_between">
					<!-- onDownLoad -->
					<view class="item submit flex_r_around" @click="onDownLoad">
						<text>去下载</text>
						<!-- <text>我知道了</text> -->
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show_outside" @close="show_outside = false" mode="top">
			<view class="openout flex_r_between">
				<view class="left">
					<image :src="$util.prefix('index/logo.png')" mode="aspectFill"></image>
					<text>安装超圈</text>
					<view class="flex_center">
						<i>点击右上角</i>
						<u-icon name="more-dot-fill" color="#666666" size="40rpx"></u-icon>
					</view>
					<view>
						<i>选择在浏览器中打开</i>
					</view>
				</view>

				<view class="right">
					<image :src="$util.prefix('index/h5_to.png')" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

		<!-- <view v-if="!is_micromessenger">
			<liu-drag-button @clickBtn="onDownLoad" :bottomPx="360">下载</liu-drag-button>
		</view> -->
		
		<!-- <u-popup :show="show_vip" @close="show_vip = false" mode="center" round="40rpx">
			<view class="show-vip flex_c">
				<view class="close-icon" @click="show_vip = false">
					<u-icon name="close-circle" size="44rpx" color="#272536"></u-icon>
				</view>
				<view class="vip-title flex_center">
					<view>下载</view>
					<text>APP专享</text>
				</view>
				
				<view class="vip-list">
					<view class="item flex_center" v-for="(item,index) in 3" :key="index">
						<image :src="$util.prefix(`public/vip_icon_${index}.png`)" mode="aspectFill"></image>
						<text v-if="index == 0">直接跟技师聊天沟通</text>
						<text v-if="index == 1">所有项目均优惠40%</text>
						<text v-if="index == 2">加入贵宾服务群</text>
					</view>
				</view>
				
				<view class="vip-btn flex_r_around" @click="showRegister">
					<text>立即加入</text>
				</view>
			</view>
		</u-popup> -->
		
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="download_show" mode="center" bgColor="transparent">
				<view class="download-show flex_c">
					<view class="download-text flex_c">
						<view>
							请下载APP体验完整版
						</view>
					</view>
					<view class="download-btn flex_r_around" @click="onDownLoad">
						<text>立即下载</text>
					</view>
				</view>
			</u-popup>
		</view>
		
		<view class="btn_box flex_r_around" @click="showRegister">
			<view class="item flex_r_around">
				<text>立即加入</text>
			</view>
		</view>

	</view>
</template>

<script>
	import live from './components/live.vue';
	import product from './components/product.vue';
	import technician from './components/technician.vue';
	import member from './components/member.vue';
	import active from './components/active.vue';
	import group from './components/group.vue';
	import videoTem from './components/video.vue';
	import cardItem from './components/card.vue';
	import empty from '@/compentents/empty/empty.vue';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		data() {
			return {
				tab: 1,

				circle: {},

				circle_id: 0,
				pid: 0,

				list: [],
				page: 1,
				total: 1,

				// 登录
				show: false,

				// 注册
				show_register: false,

				mobile: '',
				code: '',

				num: 60,
				sending: false,

				an_url: '',
				ios_url: '',

				// 是否为微信内置浏览器
				is_micromessenger: false,


				show_outside: false,

				show_download: false,

				show_two: false,

				rand: 0,

				act: 0,

				live_tab: 0,
				
				show_vip: false,
				download_show: false,
				

			}
		},

		components: {
			live,
			product,
			technician,
			member,
			videoTem,
			active,
			group,
			cardItem,
			empty,
			HevuLoading
		},

		methods: {
			preventHandler() {
				return;
			},

			onLiveTab(e) {
				if (this.live_tab == e.id) {
					return
				}

				this.page = 1;
				this.total = 1;
				this.list = [];
				this.live_tab = e.id;
				this.getChatRoom();
			},
			
			showRegister(){
				this.show_vip = false;
				this.show_register = true;
			},

			onTab(e) {
				if (this.tab == e) {
					return
				}
				this.tab = e;

				this.page = 1;
				this.total = 1;
				this.list = [];

				if (this.tab == 1) {
					this.getHotVideoRecList(1);
				}

				if (this.tab == 2) {
					this.getLoyouList();
				}

				if (this.tab == 3) {
					this.getCircleGroupList();
				}

				if (this.tab == 4) {
					this.searchCircleGoods();
				}

				if (this.tab == 5) {
					this.getCard(1);
				}

				if (this.tab == 6) {
					this.getOrderRoomPage();
				}

				if (this.tab == 7) {
					this.getRecMemberList();
				}

				if (this.tab == 8) {
					this.getChatRoom();
				}

			},

			showLogin() {
				this.show_vip = true;
				// if (this.is_micromessenger) {
				// 	this.show_outside = true;
				// } else {
				// 	// this.show = true;
				// 	this.toDownLoad();
				// }
			},

			// 获取圈子详情
			getData() {
				this.$get('/circle.circle/getCircleInfo', {
					circle_id: this.circle_id
				}).then(res => {
					this.circle = res.data;

					// uni.setNavigationBarTitle({
					// 	title: this.circle.name
					// });

					if (this.circle.tags) {
						this.circle.tags = this.circle.tags.split(',');
					} else {
						this.circle.tags = [];
					}

					// type 圈子类型：1=搭子圈,3=上门按摩圈,4=直播圈,5=相亲圈
					// show_type 展示类型：1.图文分享(视频图文课程短剧)，3=建立联系(搭子相亲交友)

					// <!-- 视频  活动  群聊  商品  卡片  直播 -->
					if (this.circle.card_open == 1) {
						this.tab = 5;
						this.getCard(1);
					} else if (this.circle.goods_open == 1) {
						this.tab = 4;
						this.searchCircleGoods();
					} else if (this.circle.article_open == 1) {
						this.tab = 1;
						this.getHotVideoRecList(1);
					} else if (this.circle.active_open == 1) {
						this.tab = 2;
						this.getLoyouList();
					} else if (this.circle.group_open == 1) {
						this.tab = 3;
						this.getCircleGroupList();
					} else if (this.circle.live_open == 1 && this.circle.live_type == 1) {
						this.tab = 6;
						this.getOrderRoomPage();
					} else if (this.circle.member_open == 1) {
						this.tab = 7;
						this.getRecMemberList();
					} else if (this.circle.live_open == 1 && this.circle.live_type == 2) {
						this.tab = 8;
						this.getChatRoom();
					}
				});
			},

			// 直播-推荐
			getOrderRoomPage() {
				this.$get('/recommend/getOrderRoomPage', {
					page: this.page,
					circle_id: this.circle_id,
					sub_tag_id: this.live_tab,
					tag_id: 4
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data)
				});
			},

			// 语音厅
			getChatRoom() {
				this.$get('/recommend/getOrderRoomPage', {
					page: this.page,
					circle_id: this.circle_id,
					sub_tag_id: this.live_tab,
					tag_id: 6
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data)
				});
			},

			// 活动
			getLoyouList() {
				this.$get('/loyou/getLoyouList', {
					circle_id: this.circle_id,
					page: this.page,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 群聊
			getCircleGroupList() {
				this.$get('/group.group/getCircleGroupList', {
					circle_id: this.circle_id,
					page: this.page,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 技师
			getStoreTechnician() {
				this.$get('/provider/getStoreTechnicianCard', {
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 商品
			searchCircleGoods() {
				this.$get('/store_goods/getGoodsList', {
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 成员
			getRecMemberList() {
				this.$get('/circle.circle/getRecMemberList', {
					page: this.page,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			// 视频-推荐
			getHotVideoRecList(is_fresh = 0) {
				this.$get('/circle.circle/getHotVideoRecList', {
					page: this.page,
					is_fresh: is_fresh,
					circle_id: this.circle_id,
					type: 0
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.list);
					if (!this.list.length) {
						this.total = 0;
					}
				});
			},

			// 视频-附近
			getNearVideoRecList(is_fresh = 0) {
				this.$get('/circle.circle/getNearVideoRecList', {
					page: this.page,
					is_fresh: is_fresh,
					circle_id: this.circle_id
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.list);
					if (!this.list.length) {
						this.total = 0;
					}
				});
			},

			// 视频-推荐
			getCard(is_fresh = 0) {
				this.$get('/circle.circle/getHotVideoRecList', {
					page: this.page,
					is_fresh: is_fresh,
					circle_id: this.circle_id,
					type: 1
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.list);
					if (!this.list.length) {
						this.total = 0;
					}
				});
			},

			toDownLoad() {
				this.show = false;
				// this.$util.toUrl(`/pages/share/invite?pid=${this.pid}&circle_id=${this.circle_id}`);
				this.show_register = true;
			},

			getCode() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}

				this.$post('/index/sendSms', {
					mobile: this.mobile,
					scene: 102
				}).then(res => {
					this.$util.msg('已发送');
					this.afterCode()
				})
			},

			afterCode() {
				this.sending = true;
				var timer = setInterval(() => {
					this.num--;
					if (this.num == 1) {
						clearInterval(timer)
						this.num = 60;
						this.sending = false;
					}
				}, 1000)
			},

			onSubmit() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if (!this.code) {
					return uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
				}

				this.$post('/login/register', {
					code: this.code,
					mobile: this.mobile,
					pid: this.pid,
					circle_id: this.circle_id,
					act: this.act
				}, false, (res => {
					this.$util.msg(res.msg);
				})).then(res => {
					this.show_register = false;
					if(this.is_micromessenger){
						this.show_outside = true;
					}else {
						this.download_show = true;
					}
				});
			},

			onDownLoad() {
				if (this.is_micromessenger) {
					this.show = false;
					this.show_register = false;
					this.show_outside = true;
				} else {
					var type = uni.getSystemInfoSync().platform;
					if (type == 'ios') {
						window.open(this.ios_url)
					} else {
						window.open(this.an_url)
					}
				}
			},

			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},

			clickReport() {
				uni.getSystemInfo({
					success: (system) => {
						this.$get('/circle.circle/clickReport', {
							rand: this.rand,
							circle_id: this.circle_id,
							device_id: system.deviceId,
						}, false);
					}
				})

			}

		},

		onLoad(option) {
			if (option.circle_id) {
				this.circle_id = option.circle_id;
			}
			if (option.pid) {
				this.pid = option.pid;
			}
			if (option.pid) {
				this.rand = option.rand;
			}

			if (option.act) {
				this.act = option.act;
			}

			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.is_micromessenger = true;
			} else {
				this.is_micromessenger = false;
				this.download_show = true;
			}
			this.getDownLoadUrl();
			this.getData();
			this.clickReport();
		},

		onReachBottom() {

			if (this.circle.is_preview == 0 || this.circle.is_preview == '0') {
				return;
			}

			if (this.total > this.list.length) {
				this.page++;
				if (this.tab == 1) {
					this.getHotVideoRecList();
				}

				if (this.tab == 2) {
					this.getLoyouList();
				}

				if (this.tab == 3) {
					this.getCircleGroupList();
				}

				if (this.tab == 4) {
					this.searchCircleGoods();
				}

				if (this.tab == 5) {
					this.getCard();
				}

				if (this.tab == 6) {
					this.getOrderRoomPage();
				}

				if (this.tab == 7) {
					this.getRecMemberList();
				}

				if (this.tab == 8) {
					this.getChatRoom();
				}
			}
		},

	}
</script>

<style lang="less" scoped>
	page {
		background: #F1F1F1;
	}

	.page {
		padding: 44px 0 130rpx;
		background: #F1F1F1;
		width: 100vw;
	}

	.nav {
		padding: 0 24rpx;
		height: 44px;
		position: fixed;
		top: 0;
		width: 100vw;
		background: #F1F1F1;
		z-index: 99;

		.image {
			height: 48rpx;
			overflow: hidden;

			image {
				width: 48rpx;
				height: 48rpx;
				background: #D8D8D8;
				flex-shrink: 0;
				border-radius: 24rpx;
			}

			text {
				max-width: 360rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
				line-height: 32rpx;
			}
		}

		.icon {
			.change_circle {
				margin-right: 32rpx;

				text {
					font-weight: 500;
					font-size: 32rpx;
					color: #131313;
					margin-right: 8rpx;
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}

	.info {
		background-size: 100% !important;
		width: 100vw;
		min-height: 428rpx;
		padding: 64rpx 56rpx 120rpx;
		overflow: hidden;

		.top {
			overflow: hidden;

			.block {
				flex: 1;
				overflow: hidden;

				.avatar {
					position: relative;
					width: 124rpx;
					height: 124rpx;
					margin-right: 16rpx;

					.image {
						width: 124rpx;
						height: 124rpx;
						border-radius: 62rpx;
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

				.nickname {
					flex: 1;
					overflow: hidden;

					text {
						font-size: 24rpx;
						color: #EBEBEB;
						line-height: 34rpx;
					}

					.name {
						overflow: hidden;

						text {
							flex: 1;
							font-weight: 500;
							font-size: 32rpx;
							color: #FFFFFF;
							line-height: 44rpx;
							overflow: hidden;
						}


					}

					view {
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						overflow: hidden;
					}

					.cate {
						overflow: hidden;
						flex-wrap: nowrap;
						margin-top: 12rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
							flex-shrink: 0;
						}

						view {
							.cate_name {
								flex: 1;
								margin-right: 6rpx;
								line-height: 28rpx;
							}

							.cate_num {
								flex-shrink: 0;
								line-height: 28rpx;
							}
						}
					}
				}
			}


		}

		.bottom {
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #EBEBEB;
			line-height: 34rpx;
		}

		.num {
			margin: 24rpx 0 12rpx;

			.item {
				margin-right: 40rpx;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
		}

		.tag {
			flex-wrap: wrap;

			.item {
				height: 40rpx;
				border-radius: 8rpx;
				padding: 0 20rpx;
				margin-right: 12rpx;
				margin-top: 12rpx;

				text {
					font-size: 20rpx;
					color: #EBEBEB;
				}
			}

			#item1 {
				border: 2rpx solid #FF6D6D;

				text {
					color: #FF6D6D;
				}
			}

			#item2 {
				border: 2rpx solid #459BFD;

				text {
					color: #459BFD;
				}
			}

			#item3 {
				border: 2rpx solid #FFBA06;

				text {
					color: #FFBA06;
				}
			}

			#item4 {
				border: 2rpx solid #8A46FF;

				text {
					color: #8A46FF;
				}
			}

			#item5 {
				border: 2rpx solid #E44DFF;

				text {
					color: #E44DFF;
				}
			}

			#item6 {
				border: 2rpx solid #FF9F36;

				text {
					color: #FF9F36;
				}
			}
		}
	}

	.content {
		width: 100vw;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: relative;
		z-index: 2;
		margin-top: -60rpx;
		padding: 20rpx 0 30rpx;

		.btn {
			width: 60rpx;
			height: 60rpx;
		}

		.tab {
			padding: 0 32rpx 16rpx;
			position: sticky;
			left: 0;
			top: 44px;
			background: #F1F1F1;
			z-index: 90;

			.item {
				height: 66rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				border-bottom: 4rpx solid transparent;
				margin-right: 40rpx;

				text {
					white-space: nowrap;
				}
			}

			#select {
				border-bottom: 4rpx solid #FD2A53;
			}
		}

		.list {
			flex-wrap: wrap;
			padding: 0 16rpx;
			position: relative;

			.mengceng {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 80;
				background: rgba(255, 255, 255, 0.4);

				.text {
					width: 372rpx;
					height: 128rpx;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 24rpx;
					margin: 200rpx auto;
					padding-top: 24rpx;

					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
						line-height: 40rpx;
					}
				}
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 104rpx 44rpx 44rpx;

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.btn {
			margin-top: 42rpx;

			.item {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;

				text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.cancel {
				background: #F1F1F1;

				text {
					color: #333333;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #FFF;
			border-radius: 50%;
		}

	}

	.btn_box {
		position: fixed;
		bottom: 140rpx;
		left: 0;
		width: 100vw;
		z-index: 99;

		.item {
			width: 400rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 16rpx;

			text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #FFF;
			}
		}
	}

	.tabbar {
		height: 120rpx;
		position: fixed;
		width: 100vw;
		left: 0;
		bottom: 0;
		background: #F1F1F1;
		z-index: 99;
		padding-bottom: 30rpx;

		#select {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
		}

		.item {
			font-size: 32rpx;
			color: #9C9C9C;
		}

		image {
			width: 96rpx;
			height: 72rpx;
		}

	}

	.register {
		width: 600rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-top: 30rpx;

		.logo {
			width: 128rpx;
			height: 128rpx;
			background: #FD4545;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 128rpx;
				height: 128rpx;
			}
		}

		.input {
			width: 480rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #F1F1F1;
			padding: 0 24rpx;
			margin: 32rpx 0 0;

			input {
				flex: 1;
			}

			.code_btn {
				font-weight: 500;
				font-size: 26rpx;
				color: #FD2A53;
				margin-left: 20rpx;
			}
		}

		.text {
			margin: 32rpx 0;

			text {
				font-size: 22rpx;
				color: #999999;
			}

			i {
				color: #FD2A53;
				font-style: normal;
			}
		}

		.register_btn {
			width: 480rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 16rpx 44rpx 62rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.openout {
		background: rgba(255, 255, 255, .8);
		width: 100vw;
		padding: 32rpx 64rpx 32rpx 72rpx;

		.left {
			image {
				width: 174rpx;
				height: 66rpx;
				display: block;
				margin-bottom: 20rpx;
			}

			view {
				i {
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
				}
			}

			text {
				font-size: 28rpx;
				color: #666666;
				display: block;
			}
		}

		.right {
			width: 90rpx;
			height: 188rpx;

			image {
				width: 90rpx;
				height: 188rpx;
				display: block;
			}
		}

	}

	.live_tab {
		padding: 0 16rpx 0 32rpx;
		margin-bottom: 24rpx;

		.item {
			width: 144rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-right: 16rpx;
			border: 2rpx solid #FFFFFF;

			text {
				font-size: 24rpx;
				color: #131313;
			}
		}

		#select {
			background: #FFEAEE;
			border: 2rpx solid #FD2A53;

			text {
				color: #FD2A53;
			}
		}
	}
	
	
	.download-show {
		width: 560rpx;
		height: 344rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 72rpx 0 0;
	
		.download-text {
			view {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
		}
	
		.download-btn {
			width: 224rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin-top: 48rpx;
	
			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.show-vip {
		width: 600rpx;
		background: linear-gradient( 180deg, #FDEDD8 0%, #FFFFFF 100%);
		border-radius: 40rpx;
		padding: 74rpx 66rpx 72rpx;
		position: relative;
		
		.close-icon {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}
		
		.vip-title {
			view {
				font-size: 40rpx;
				color: #462A1B;
				line-height: 50rpx;
				margin-bottom: 52rpx;
				font-weight: 800;
			}
			
			text {
				font-size: 40rpx;
				color: #FF6930;
				line-height: 50rpx;
				margin-bottom: 52rpx;
				font-weight: 800;
			}
		}
		
		.vip-list {
			width: 100%;
			.item {
				margin-bottom: 44rpx;
				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 40rpx;
					flex-shrink: 0;
				}
				
				text {
					font-size: 28rpx;
					color: #885539;
					line-height: 40rpx;
				}
			}
		}
		
		.vip-btn {
			width: 400rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			
			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>